<template>
  <div class="channel-edit">
    <van-cell-group>
      <van-cell>
        <template #title>
          <h4>我的频道</h4>
        </template>
        <template>
          <van-button @click="isEdit = !isEdit">{{isEdit ? '完成' : '编辑'}}</van-button>
        </template>
      </van-cell>
    </van-cell-group>
    <van-grid>
      <van-grid-item
        class="myChannel"
        :class="{active: activeIndex === index}"
        v-for="(item, index) in myChannels"
        :key="item.id"
        :text="item.name"
        @click="onChannelClick(item, index)"
        :icon="(isEdit && index !== 0) ? 'close' : ''"
      />
    </van-grid>
    <van-cell-group>
      <van-cell>
        <template #title>
          <h4>频道推荐</h4>
        </template>
      </van-cell>
    </van-cell-group>
    <van-grid>
      <van-grid-item
        v-for="item in beLeftChannels"
        :key="item.id"
        :text="item.name"
        @click="addChannel(item)"
      />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, addUserChannel, deleteUserChannel } from '../api/channel'
import { mapState } from 'vuex'
import { setItem } from '../utils/storage'

export default {
  name: 'channelEdit',
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    activeIndex: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      allChannels: [],
      isEdit: false
    }
  },
  methods: {
    async loadAllChannels () {
      const { data: { data: res } } = await getAllChannels()
      this.allChannels = res.channels
    },
    async addChannel (channel) {
      this.myChannels.push(channel)
      /*
        数据持久化
       */
      if (this.user) { // 已登录，保存到线上
        await addUserChannel({
          channels: [{
            id: channel.id,
            seq: this.myChannels.length // channel 的排序
          }]
        })
      } else { // 没有登录，存储到本地
        setItem('user-channels', this.myChannels)
      }
    },
    onChannelClick (channel, index) {
      if (this.isEdit && index !== 0) {
        // 编辑状态，删除频道
        // ‘推荐’频道禁止删除
        this.removeChannel(channel, index)
      } else {
        // 非编辑状态，切换频道
        this.switchChannel(index)
      }
    },
    async removeChannel (channel, index) {
      if (index <= this.activeIndex) {
        // 如果删除项在当前激活项之前，则需要更新index
        this.$emit('update-active', this.activeIndex - 1)
      }
      this.myChannels.splice(index, 1)
      /*
        数据持久化
       */
      if (this.user) {
        await deleteUserChannel(channel.id)
      } else {
        setItem('user-channels', this.myChannels)
      }
    },
    switchChannel (index) {
      // 切换频道
      this.$emit('update-active', index)
      // 关闭popup
      this.$emit('closePopup')
    }
  },
  computed: {
    ...mapState(['user']),
    beLeftChannels () {
      return this.allChannels.filter(item => {
        return !this.myChannels.some(value => {
          return value.id === item.id
        })
      })
    }
  },
  created () {
    this.loadAllChannels()
  }
}
</script>

<style scoped>
.channel-edit {
  padding-top: 45px;
}
/deep/ .van-grid-item {
  width: 72px;
  height: 43px;
  border-radius: 6px;
  padding: 2px;
}
/deep/ .van-grid-item__content {
  background-color: #f4f5f6;
}
.active /deep/ .van-grid-item__text {color: #e5615b;}
/deep/ .van-grid-item__text {
  margin-top: 0;
  font-size: 14px;
}
.myChannel /deep/ .van-icon {
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 20px;
}
</style>
